<template>
	<view class="content">
    <view class="list">
      <view class="item" v-for="(item, index) in lists" :key="index">
          <view class="question"  @tap="handleQuestion(item, index)">
            <view class="title"><view class="dot"></view>{{item.question.value}}</view>
            <image :src="item.showAnswer ? '../static/arrow_up.png' : '../static/arrow_down.png'" class="arrow-img"/>
          </view>
           <view class="answer" v-if="item.showAnswer" >{{item.content.value}}</view>
      </view>
    </view>
	</view>
</template>

<script>
	import {
		getInvoiceQuestion,
	} from '@/api/user.js';
	export default {
		data() {
			return {
        lists:[]
			}
		},
    onLoad(options) {
    	this.initData()
    },
    methods: {
      initData(){
        getInvoiceQuestion().then(res => {
        	this.lists = res.data
        }).catch(err => {
        	that.$util.Tips({
        		title: err
        	});376
        })
      },
      handleQuestion(item, index){
          console.log('item,index', item, index)
          let {lists} = this
        	this.lists = lists.map((item, idx) => {
            if(idx == index){
              item.showAnswer = !item.showAnswer
            }
            return item;
          })
      }
    }
	}
</script>

<style scoped lang="scss">
	page {
    min-height: 100vh;
		background-color: rgb(248,249,252);
	}

	.content {
		padding: 30rpx;
	}
  .list{
    border-radius: 10rpx;
    background: #FFF;
  }
  .item{
    color: #333;
    font-size: 26rpx;
    padding: 30rpx 20rpx;
    border-bottom: 1rpx solid #eee;
    .question{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title{
        display: flex;
        align-items: center;
        .dot{
          width: 12rpx;
          height: 12rpx;
          background: #008DFF;
          border-radius: 12rpx;
          margin-right: 6rpx;
        }
      }
      image{
        width: 32rpx;
        height: 32rpx;
      }
    }
    .answer{
      margin-top: 8rpx;
      font-size: 28rpx;
      color: rgba(0,0,0,0.6);
      line-height: 33rpx;
    }
    
  }
  .item:last-child{
    border-bottom: none;
  }
</style>
